<template>
  <div>
    <el-dialog v-model="visible" :title="title" width="50%">
      <el-form :model="form">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.userName" />
        </el-form-item>
        <el-form-item label="头像" :label-width="formLabelWidth">
<!--          <el-input v-model="form.avatar" />-->
          <el-upload
              class="avatar-uploader"
              action="/api/common/upload"
              :headers="headers"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
          >
            <img v-if="form.avatar" :src="'/api/common/download/'+form.avatar" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="届数" :label-width="formLabelWidth">
          <el-input v-model="form.edition" />
        </el-form-item>
        <el-form-item label="任职单位职务与职称" :label-width="formLabelWidth">
          <el-input v-model="form.unitPosition" />
        </el-form-item>
        <el-form-item label="排序" :label-width="formLabelWidth">
          <el-input v-model="form.sort" />
        </el-form-item>
        <el-form-item label="工作单位" :label-width="formLabelWidth">
          <el-input v-model="form.workUnit" />
        </el-form-item>
        <el-form-item label="个人简介" :label-width="formLabelWidth">
          <el-input v-model="form.introduction" type="textarea" />
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="form.remarks" type="textarea" />
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>

</template>

<script setup>
import {ref,defineEmits} from 'vue'
import {ElMessage, ElMessageBox} from "element-plus";
import {Plus} from "@element-plus/icons-vue";
import {addAssociationCouncil,updateAssociationCouncil} from '../../../api/guild/associationCouncil'


const headers = {
  token: localStorage.getItem('Token')
}

const visible = ref(false)
const title=ref('')
const formLabelWidth = '140px'


// 表单默认值
let defaultForm = {
  id: '',
  userName: '',
  avatar: '',
  edition: '',
  unitPosition: '',
  sort: '',
  workUnit: '',
  introduction: '',
  remarks: '',
  status: 1,
}

let form = ref(defaultForm)

// 新增
function add(){
  // 重置表单
  form.value = {...defaultForm}
  visible.value = true
  title.value='新增理事会成员'
}

// 编辑
function edit(row){
  console.log("edit",row)
  visible.value = true
  title.value='编辑理事会成员'
  form.value = row
}

// 定义触发器
let emit = defineEmits(['refresh'])

async function submitForm(){
  try {
    await ElMessageBox.confirm(
        '确定提交吗?',
        '重要提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
    )
    try {
      let formData = JSON.parse(JSON.stringify(form.value))

      let result
      //判断编辑还是新增
      if(formData.id){
        result = await updateAssociationCouncil(formData)
      }else{
        result =await addAssociationCouncil(formData)
      }
      ElMessage.success(result.data)
      visible.value = false
      //通知父组件更新数据
      emit('refresh')
    } catch (e) {
      console.log("e",e)
      ElMessage.error(e)
    }
  } catch (e) {

  }
}

function handleAvatarSuccess(response,uploadFile){
  // console.log("response",response)
  form.value.avatar = response.data
}





//暴露出去
defineExpose({
  add,
  edit,
})

</script>

<style  scoped>
.avatar{
  width: 178px;
  height: 178px;
  display: block;
}
</style>
